<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>限时事件计数系统 - 数智作业管理系统</title>
    <link rel="icon" href="/assets/ico/7favicon.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="/assets/css/main.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .counter-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }

        .counter-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 90%;
            max-width: 600px;
            transition: box-shadow 0.3s;
        }

        .counter-card:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .card-title {
            font-size: 18px;
            font-weight: bold;
            border: 1px solid transparent;
            padding: 5px;
            border-radius: 4px;
        }

        .card-title[contenteditable="true"] {
            border-color: #ddd;
        }

        .card-title[contenteditable="true"]:focus {
            outline: none;
            border-color: #007bff;
        }

        .delete-btn {
            background-color: #ff5252;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .delete-btn:hover {
            background-color: #e04040;
        }

        .time-control {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }

        .time-input {
            flex: 1;
            min-width: 120px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .time-btn {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .time-btn:hover {
            background-color: #0069d9;
        }

        .time-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .time-display {
            margin-bottom: 15px;
            font-weight: bold;
        }

        .time-remaining {
            color: #007bff;
        }

        .time-expired {
            color: #ff5252;
        }

        .card-body {
            margin-top: 20px;
        }

        .display-row {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .display-box {
            flex: 1;
            text-align: center;
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 10px;
        }

        .label {
            font-size: 14px;
            color: #6c757d;
        }

        .value {
            font-size: 18px;
            font-weight: bold;
            margin-top: 5px;
        }

        .btn-row {
            display: flex;
            gap: 10px;
        }

        .complete-btn,
        .reset-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .complete-btn {
            background-color: #28a745;
            color: white;
        }

        .complete-btn:hover {
            background-color: #218838;
        }

        .complete-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .reset-btn {
            background-color: #ffc107;
            color: #212529;
        }

        .reset-btn:hover {
            background-color: #e0a800;
        }

        .add-btn {
            display: block;
            margin: 20px auto;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
        }

        .add-btn:hover {
            background-color: #0069d9;
        }

        .local-reset-btn {
            background-color: #ff5252;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-left: 10px;
        }

        .local-reset-btn:hover {
            background-color: #e04040;
        }

        .time-warning {
            color: #ff9800;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</head>

<body class="bg-gray-100 min-h-screen pt-16 pb-10">
    <div class="container mx-auto px-4 py-8">
        <!-- 面包屑导航和标题 -->
        <div class="flex items-center justify-between mb-8 max-w-5xl mx-auto">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">每日工作进度完成情况统计</h1>
                <p class="text-gray-500 text-sm">跟踪记录限时事件的完成次数</p>
            </div>
            <nav>
                <ol class="flex text-sm text-gray-500">
                    <li class="flex items-center">
                        <a href="index.html" class="text-blue-600 hover:text-blue-700">首页</a>
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                    </li>
                    <li class="flex items-center">
                        <a href="#" class="text-blue-600 hover:text-blue-700">系统工具</a>
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                    </li>
                    <li>
                        <span class="text-gray-600">任务统计工具</span>
                    </li>
                </ol>
            </nav>
        </div>

        <div class="counter-list max-w-5xl mx-auto" id="counterList">
        <!-- 初始计数器 -->
        <div class="counter-card" data-id="1">
            <div class="card-header">
                <span class="card-title" contenteditable="true">事件1</span>
                <div>
                    <button class="local-reset-btn">重置本事件</button>
                    <button class="delete-btn">删除</button>
                </div>
            </div>
            <div class="time-control">
                <input type="datetime-local" class="time-input start-time" placeholder="开始时间">
                <input type="datetime-local" class="time-input end-time" placeholder="结束时间">
                <button class="time-btn start-btn">开始计时</button>
                <button class="time-btn reset-time-btn" disabled>重置时间</button>
            </div>
            <div class="time-display">
                剩余时间: <span class="time-remaining">00:01:00</span>
                <div class="time-warning" id="timeWarning1"></div>
            </div>
            <div class="card-body">
                <div class="display-row">
                    <div class="display-box">
                        <div class="label">事件名称</div>
                        <div class="value event-name">事件1</div>
                    </div>
                    <div class="display-box">
                        <div class="label">正字计数</div>
                        <div class="value zheng-count">(等待计数)</div>
                    </div>
                    <div class="display-box">
                        <div class="label">阿拉伯数字</div>
                        <div class="value num-count">0</div>
                    </div>
                </div>
                <div class="btn-row">
                    <button class="complete-btn">完成一次</button>
                    <button class="reset-btn">重置计数</button>
                </div>
            </div>
        </div>
        </div>

        <div class="max-w-5xl mx-auto text-center">
            <button class="add-btn" id="addBtn">添加新计数框</button>
        </div>
    </div>

    <script>
        // 正字笔画模板
        const strokeMap = ['一', '一丨', '一丨一', '一丨一丨'];

        // 计数器数据管理（示例：初始数据）
        const counters = [
            {
                id: 1,
                title: '事件1',
                count: 0, // 将初始计数设为 0
                timer: null,       // 定时器ID
                startTime: null,   // 开始时间
                endTime: null,     // 结束时间
                isRunning: false   // 计时状态
            }
        ];

        // DOM节点
        const counterList = document.getElementById('counterList');
        const addBtn = document.getElementById('addBtn');

        // 格式化时间显示
        function formatTime(seconds) {
            const hours = Math.floor(seconds / 3600);
            const mins = Math.floor((seconds % 3600) / 60);
            const secs = seconds % 60;
            return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }

        // 检查当前时间是否在事件时间范围内
        function isWithinTimeRange(counter) {
            const now = new Date().getTime();
            return counter.startTime && counter.endTime && now >= counter.startTime && now <= counter.endTime;
        }

        // 更新计时器显示
        function updateTimerDisplay(card, counter) {
            const timeDisplay = card.querySelector('.time-remaining');
            const timeWarning = card.querySelector('.time-warning');
            const now = new Date().getTime();

            if (counter.endTime && now < counter.endTime) {
                const remainingSeconds = Math.floor((counter.endTime - now) / 1000);
                timeDisplay.textContent = formatTime(remainingSeconds);

                // 检查是否在时间范围内
                if (counter.startTime && now < counter.startTime) {
                    timeWarning.textContent = '事件尚未开始';
                    timeWarning.style.color = '#ff9800';
                } else if (isWithinTimeRange(counter)) {
                    timeWarning.textContent = '事件进行中';
                    timeWarning.style.color = '#28a745';
                } else {
                    timeWarning.textContent = '';
                }
            } else {
                timeDisplay.textContent = '00:00';
                if (counter.endTime && now > counter.endTime) {
                    timeWarning.textContent = '事件已结束';
                    timeWarning.style.color = '#ff5252';
                } else {
                    timeWarning.textContent = '';
                }
            }

            // 时间结束时样式变化
            if (now >= counter.endTime) {
                timeDisplay.classList.add('time-expired');
            } else {
                timeDisplay.classList.remove('time-expired');
            }
        }

        // 开始计时
        function startTimer(card, counter) {
            // 如果已经在计时，不重复启动
            if (counter.isRunning) return;

            const startTimeInput = card.querySelector('.start-time');
            const endTimeInput = card.querySelector('.end-time');
            const startTime = new Date(startTimeInput.value).getTime();
            const endTime = new Date(endTimeInput.value).getTime();

            if (isNaN(startTime) || isNaN(endTime) || startTime >= endTime) {
                alert('请选择有效的开始时间和结束时间，且开始时间要早于结束时间！');
                return;
            }

            counter.startTime = startTime;
            counter.endTime = endTime;
            counter.isRunning = true;

            // 更新显示
            updateTimerDisplay(card, counter);

            // 禁用输入框和开始按钮
            startTimeInput.disabled = true;
            endTimeInput.disabled = true;
            card.querySelector('.start-btn').disabled = true;

            // 启用重置时间按钮
            card.querySelector('.reset-time-btn').disabled = false;

            // 设置定时器
            counter.timer = setInterval(() => {
                updateTimerDisplay(card, counter);

                // 时间结束
                if (new Date().getTime() >= counter.endTime) {
                    clearInterval(counter.timer);
                    counter.isRunning = false;

                    // 禁用完成按钮
                    card.querySelector('.complete-btn').disabled = true;

                    // 显示提示
                    alert('时间已结束，无法继续计数！');
                }
            }, 1000);
        }

        // 重置时间
        function resetTimer(card, counter) {
            // 清除定时器
            if (counter.timer) {
                clearInterval(counter.timer);
                counter.timer = null;
            }

            // 重置状态
            counter.isRunning = false;
            counter.startTime = null;
            counter.endTime = null;

            // 更新显示
            const timeDisplay = card.querySelector('.time-remaining');
            const timeWarning = card.querySelector('.time-warning');
            timeDisplay.textContent = '00:00';
            timeDisplay.classList.remove('time-expired');
            timeWarning.textContent = '';

            // 启用输入框和开始按钮
            const startTimeInput = card.querySelector('.start-time');
            const endTimeInput = card.querySelector('.end-time');
            startTimeInput.value = '';
            startTimeInput.disabled = false;
            endTimeInput.value = '';
            endTimeInput.disabled = false;
            card.querySelector('.start-btn').disabled = false;

            // 禁用重置时间按钮
            card.querySelector('.reset-time-btn').disabled = true;

            // 启用完成按钮
            card.querySelector('.complete-btn').disabled = false;
        }

        // 生成正字文本
        function getZhengText(count) {
            if (count === 0) return '(等待计数)';
            const full = Math.floor(count / 5);
            const remainder = count % 5;
            let text = '';
            for (let i = 0; i < full; i++) text += '正';
            if (remainder > 0) text += strokeMap[remainder - 1];
            return text;
        }

        // 更新计数器显示 - 仅更新计数相关内容，不改变按钮状态
        function updateCounterDisplay(card) {
            const id = card.dataset.id;
            const counter = counters.find(item => item.id == id);
            if (!counter) return;

            // 更新标题同步
            const titleEl = card.querySelector('.card-title');
            const eventNameEl = card.querySelector('.event-name');
            eventNameEl.textContent = titleEl.textContent.trim();

            // 更新计数显示
            const zhengEl = card.querySelector('.zheng-count');
            const numEl = card.querySelector('.num-count');
            zhengEl.textContent = getZhengText(counter.count);
            numEl.textContent = counter.count;
        }

        // 更新计数器状态 - 处理时间范围和按钮状态
        function updateCounterState(card) {
            const id = card.dataset.id;
            const counter = counters.find(item => item.id == id);
            if (!counter) return;

            // 检查时间是否在范围内，控制按钮状态
            const completeBtn = card.querySelector('.complete-btn');
            completeBtn.disabled = !isWithinTimeRange(counter);
        }

        // 重置当前事件的时间和计数
        function resetCurrentEvent(card, counter) {
            if (!confirm('确定要重置此事件的时间和计数吗？')) {
                return;
            }

            // 重置时间
            resetTimer(card, counter);

            // 重置计数
            counter.count = 0;
            updateCounterDisplay(card);
        }

        // 创建新计数器
        function createCounter(title = `事件${counters.length + 1}`) {
            const newId = Date.now(); // 唯一ID
            const counter = {
                id: newId,
                title,
                count: 0, // 将初始计数设为 0
                timer: null,
                startTime: null,
                endTime: null,
                isRunning: false
            };
            counters.push(counter);

            // 生成DOM
            const card = document.createElement('div');
            card.className = 'counter-card';
            card.dataset.id = newId;
            card.innerHTML = `
                <div class="card-header">
                    <span class="card-title" contenteditable="true">${title}</span>
                    <div>
                        <button class="local-reset-btn">重置本事件</button>
                        <button class="delete-btn">删除</button>
                    </div>
                </div>
                <div class="time-control">
                    <input type="datetime-local" class="time-input start-time" placeholder="开始时间">
                    <input type="datetime-local" class="time-input end-time" placeholder="结束时间">
                    <button class="time-btn start-btn">开始计时</button>
                    <button class="time-btn reset-time-btn" disabled>重置时间</button>
                </div>
                <div class="time-display">
                    剩余时间: <span class="time-remaining">00:00:00</span>
                    <div class="time-warning" id="timeWarning${newId}"></div>
                </div>
                <div class="card-body">
                    <div class="display-row">
                        <div class="display-box">
                            <div class="label">事件名称</div>
                            <div class="value event-name">${title}</div>
                        </div>
                        <div class="display-box">
                            <div class="label">正字计数</div>
                            <div class="value zheng-count">${getZhengText(0)}</div>
                        </div>
                        <div class="display-box">
                            <div class="label">阿拉伯数字</div>
                            <div class="value num-count">0</div>
                        </div>
                    </div>
                    <div class="btn-row">
                        <button class="complete-btn">完成一次</button>
                        <button class="reset-btn">重置计数</button>
                    </div>
                </div>
            `;

            // 绑定事件
            const titleEl = card.querySelector('.card-title');
            titleEl.addEventListener('blur', () => {
                counter.title = titleEl.textContent.trim();
                updateCounterDisplay(card);
            });

            // 时间控制事件
            card.querySelector('.start-btn').addEventListener('click', () => {
                startTimer(card, counter);
            });

            card.querySelector('.reset-time-btn').addEventListener('click', () => {
                resetTimer(card, counter);
            });

            // 重置当前事件按钮事件
            card.querySelector('.local-reset-btn').addEventListener('click', () => {
                resetCurrentEvent(card, counter);
            });

            // 计数事件
            card.querySelector('.complete-btn').addEventListener('click', () => {
                // 检查时间是否在范围内
                if (!isWithinTimeRange(counter)) {
                    const now = new Date().getTime();
                    if (now < counter.startTime) {
                        alert('事件尚未开始，无法计数！');
                    } else if (now > counter.endTime) {
                        alert('事件已结束，无法继续计数！');
                    } else {
                        alert('请先设置有效的时间范围！');
                    }
                    return;
                }

                counter.count++;
                updateCounterDisplay(card);
            });

            // 重置事件
            card.querySelector('.reset-btn').addEventListener('click', () => {
                if (counter.count === 0) return alert('计数已为0');
                if (confirm('确定重置计数？')) {
                    counter.count = 0;
                    updateCounterDisplay(card);
                }
            });

            // 删除事件
            card.querySelector('.delete-btn').addEventListener('click', () => {
                if (counters.length === 1) return alert('至少保留1个计数框');

                // 清除定时器
                if (counter.timer) {
                    clearInterval(counter.timer);
                }

                // 删除DOM和数据
                card.remove();
                counters.splice(counters.findIndex(item => item.id == newId), 1);
            });

            counterList.appendChild(card);
        }

        // 初始化：处理已有计数器的事件绑定（示例中的第一个计数器）
        const initCards = document.querySelectorAll('.counter-card');
        initCards.forEach((initCard) => {
            const id = initCard.dataset.id;
            const counter = counters.find(item => item.id == id);

            // 标题编辑事件
            const titleEl = initCard.querySelector('.card-title');
            titleEl.addEventListener('blur', () => {
                counter.title = titleEl.textContent.trim();
                updateCounterDisplay(initCard);
            });

            // 时间控制事件
            initCard.querySelector('.start-btn').addEventListener('click', () => {
                startTimer(initCard, counter);
            });

            initCard.querySelector('.reset-time-btn').addEventListener('click', () => {
                resetTimer(initCard, counter);
            });

            // 重置当前事件按钮事件
            initCard.querySelector('.local-reset-btn').addEventListener('click', () => {
                resetCurrentEvent(initCard, counter);
            });

            // 计数事件
            initCard.querySelector('.complete-btn').addEventListener('click', () => {
                if (!isWithinTimeRange(counter)) {
                    const now = new Date().getTime();
                    if (now < counter.startTime) {
                        alert('事件尚未开始，无法计数！');
                    } else if (now > counter.endTime) {
                        alert('事件已结束，无法继续计数！');
                    } else {
                        alert('请先设置有效的时间范围！');
                    }
                    return;
                }
                counter.count++;
                updateCounterDisplay(initCard);
            });

            // 重置事件
            initCard.querySelector('.reset-btn').addEventListener('click', () => {
                if (counter.count === 0) return alert('计数已为0');
                if (confirm('确定重置计数？')) {
                    counter.count = 0;
                    updateCounterDisplay(initCard);
                }
            });

            // 删除事件
            initCard.querySelector('.delete-btn').addEventListener('click', () => {
                if (counters.length === 1) return alert('至少保留1个计数框');

                // 清除定时器
                if (counter.timer) {
                    clearInterval(counter.timer);
                }

                initCard.remove();
                counters.splice(counters.findIndex(item => item.id == id), 1);
            });
        });

        // 添加按钮事件
        addBtn.addEventListener('click', () => {
            createCounter();
        });

        // 定期更新所有计数器的状态（每500毫秒）
        setInterval(() => {
            document.querySelectorAll('.counter-card').forEach(card => {
                updateCounterState(card);
            });
        }, 500);
    </script>
</body>

</html>